Figures and Tables

Chapter 1 Human Interface Principles 3

Figure 1-1 Direct manipulation 6

Figure 1-2 An example of a bad message and an example of a helpful message 10

Figure 1-3 Don't use arbitrary graphic elements 12

Chapter 2 General Design Considerations 15

Figure 2-1 Menu bars in different languages 18

Figure 2-2 English and Arabic dialog boxes 20

Figure 2-3 Dialog boxes with display rectangles that are different sizes and the same size 21

Figure 2-4 Right-to-left alignment of dialog box items 21

Figure 2-5 The Keyboard menu 23

Figure 2-6 The boundaries of a font 24

Figure 2-7 The Sound control panel 26

Figure 2-8 A shutdown message 28

Figure 2-9 The AppleShare connect dialog box 29

Chapter 3 Human Interface Design and the Development Process 33

Figure 3-1 An expanding dialog box 36

Figure 3-2 Directions a window can expand 37

Figure 3-3 An incorrect subpalette indicator 40

Figure 3-4 A better subpalette indicator 40

Chapter 4 Menus 49

Figure 4-1 The standard order of actions 51

Figure 4-2 A menu bar 53

Figure 4-3 Three menu bars 53

Figure 4-4 The Finder menu bar in six languages 54

Figure 4-5 An unavailable menu 55

Figure 4-6 Opening a menu 56

Figure 4-7 A feedback technique 57

Figure 4-8 A typical menu 58

Figure 4-9 A menu with adjectives 59

Figure 4-10 Command names properly capitalized 59

Figure 4-11 Unavailable items aren't highlighted 60

Figure 4-12 Menus with appropriate groups 61

Figure 4-13 Grouping items in menus 62

Figure 4-14 Standard menu dividers 63

Figure 4-15 An inappropriate menu divider 63

Figure 4-16 A menu with text styles and an indicator 64

Figure 4-17 A checkmark to indicate a choice in a mutually exclusive group 65

Figure 4-18 A checkmark to indicate a choice in an accumulating attribute group 65

Figure 4-19 Dashes to indicate partial attributes in an accumulating attribute group 66

Figure 4-20 Several attributes in effect 67

Figure 4-21 The ellipsis character means more information is required 68

Figure 4-22 Don't use the ellipsis character with a command that doesn't require more information 69

Figure 4-23 The absence of the ellipsis character means no more information
is required 70

Figure 4-24 The ellipsis character doesn't mean an alert box appears 71

Figure 4-25 The Application menu with a notification symbol 72

Figure 4-26 Don't use arbitrary symbols in menus 72

Figure 4-27 A Style menu with text styles 73

Figure 4-28 The effects of the two states of a Style menu item 74

Figure 4-29 A menu with nonstandard marks and extraneous text styles and a menu all in plain text style 75

Figure 4-30 A set of toggled menu items 76

Figure 4-31 A single toggled menu item whose name changes 76

Figure 4-32 An ambiguous toggled menu item 77

Figure 4-33 An incorrect use of a checkmark to indicate a state 78

Figure 4-34 A scrolling menu 78

Figure 4-35 The menu scrolling in the other direction 79

Figure 4-36 A hierarchical menu 79

Figure 4-37 Don't use submenus unnecessarily 80

Figure 4-38 A menu bar on a 9-inch screen with space for more menu titles 81

Figure 4-39 Examples of submenu titles 81

Figure 4-40 Avoid more than one level of submenus 82

Figure 4-41 A pop-up menu and its parts 83

Figure 4-42 Opening a pop-up menu 84

Figure 4-43 Pop-up menus versus radio buttons 85

Figure 4-44 Pop-up menus versus checkboxes 86

Figure 4-45 Don't use pop-up menus for commands 87

Figure 4-46 A standard pop-up menu 87

Figure 4-47 Using a pop-up menu 88

Figure 4-48 Correct and incorrect use of fonts in pop-up menus 89

Figure 4-49 Pop-up menu behavior 90

Figure 4-50 A hidden pop-up menu 91

Figure 4-51 A type-in pop-up menu 92

Figure 4-52 A type-in pop-up menu with user's choice added 92

Figure 4-53 A tools palette and a color palette 93

Figure 4-54 Using a tear-off menu 94

Figure 4-55 A tear-off menu on top of a document window 95

Figure 4-56 Palettes and feedback 96

Figure 4-57 A tool palette with the corresponding pointers 97

Figure 4-58 A tool palette in a window 97

Figure 4-59 An Apple menu 98

Figure 4-60 An About dialog box for an application 99

Figure 4-61 A File menu 99

Figure 4-62 The New command 100

Figure 4-63 The standard file dialog box for opening files 101

Figure 4-64 The save changes alert box 103

Figure 4-65 The correct location of the save changes alert box 104

Figure 4-66 The Save command 105

Figure 4-67 A sample alert box to use when a disk is full 105

Figure 4-68 The Save As command and dialog box 106

Figure 4-69 The Revert command 107

Figure 4-70 A Page Setup dialog box 108

Figure 4-71 A Print dialog box 109

Figure 4-72 A standard Edit menu for an application 110

Figure 4-73 Adding commands to the Edit menu 110

Figure 4-74 A sample Edit menu with Edition Manager commands 111

Figure 4-75 A sample hierarchical Edit menu with Edition Manager commands 111

Figure 4-76 The Clipboard 112

Figure 4-77 The Undo and Redo commands 114

Figure 4-78 The results of using the Paste command 116

Figure 4-79 The Create Publisher command and dialog box 118

Figure 4-80 The Subscribe To command and dialog box 118

Figure 4-81 The Publisher Options dialog box 119

Figure 4-82 The Subscriber Options dialog box 119

Figure 4-83 A Font menu 121

Figure 4-84 Don't combine the Font menu with other menus 122

Figure 4-85 A Size menu 122

Figure 4-86 A sample pull-down Size menu and font size dialog box 123

Figure 4-87 A Style menu 124

Figure 4-88 The Help menu 125

Figure 4-89 The Keyboard menu 126

Table 4-1 Apple-reserved keyboard equivalents for all systems 128

Table 4-2 Additional reserved keyboard equivalents for worldwide systems 128

Table 4-3 Common keyboard equivalents that are not reserved 129

Chapter 5 Windows 131

Figure 5-1 Examples of standard windows 133

Figure 5-2 Standard document window parts 134

Figure 5-3 Windows on a color screen 135

Figure 5-4 Standard window components in color 136

Figure 5-5 Colors that the user can choose for windows 137

Figure 5-6 A utility window 137

Figure 5-7 Make it clear where text will appear 138

Figure 5-8 The active window 139

Figure 5-9 Don't show a selection in an inactive window 141

Figure 5-10 Appropriate window titles for a series of unnamed windows 142

Figure 5-11 Examples of correct and incorrect window titles 143

Figure 5-12 Display order of document windows and modeless dialog boxes 144

Figure 5-13 Adding floating windows to the desktop 145

Figure 5-14 Adding a movable modal dialog box to the desktop 146

Figure 5-15 Window positions on a single screen 147

Figure 5-16 The standard window position on two sizes of screens 148

Figure 5-17 The standard window position on multiple screens 149

Figure 5-18 A window displayed across two screens 150

Figure 5-19 Standard position of an alert box 151

Figure 5-20 Alert box position in relation to the active document window 151

Figure 5-21 Standard alert box position with more than one screen 152

Figure 5-22 The close box 153

Figure 5-23 The save changes alert box 154

Figure 5-24 Moving a window 155

Figure 5-25 Multiple monitors and conceptual work space 156

Figure 5-26 A window growing larger 157

Figure 5-27 Relationship between a window and a document 158

Figure 5-28 The elements of a scroll bar 159

Figure 5-29 Using scroll arrows and the scroll box 159

Figure 5-30 Inactive scroll bars in active and inactive document windows 160

Figure 5-31 Background between the content and the window frame 161

Figure 5-32 Acceptable additions to the scroll bar region 162

Figure 5-33 Too many controls in the scroll bar 162

Figure 5-34 Scrolling by clicking a scroll arrow 163

Figure 5-35 Scrolling by clicking in the gray area 164

Figure 5-36 Scrolling by dragging the scroll box 165

Figure 5-37 Automatic scrolling 166

Figure 5-38 The zoom box 168

Figure 5-39 The standard state and the user state of a document 169

Figure 5-40 A split window 171

Figure 5-41 Split bar size 171

Figure 5-42 Independent and locked scrolling of window panes 172

Chapter 6 Dialog Boxes 175

Figure 6-1 Examples of dialog box types 177

Figure 6-2 A typical modeless dialog box 178

Figure 6-3 Two open modeless dialog boxes 179

Figure 6-4 The essential elements of a modeless dialog box 180

Figure 6-5 Incorrect absence of a close box in a modeless dialog box 181

Figure 6-6 Provide a place for the user to enter information in a modeless
dialog box 184

Figure 6-7 A typical movable modal dialog box 185

Figure 6-8 The essential elements of a movable modal dialog box 186

Figure 6-9 Close box used incorrectly in a movable modal dialog box 187

Figure 6-10 A Finder movable modal dialog box 187

Figure 6-11 Menu bar access while a movable modal dialog box is open 188

Figure 6-12 An example of a modal dialog box 189

Figure 6-13 A status dialog box 190

Figure 6-14 The essential elements of a modal dialog box 190

Figure 6-15 Access to the Edit menu when displaying a modal dialog box 191

Figure 6-16 Second modal dialog box on top of first one 193

Figure 6-17 The essential elements of an alert box 194

Figure 6-18 An example of a note alert box 195

Figure 6-19 An example of a caution alert box 195

Figure 6-20 An example of a stop alert box 196

Figure 6-21 Recommended spacing of buttons and text in dialog and alert boxes 197

Figure 6-22 An active scrolling list 198

Figure 6-23 A well-written dialog box message 199

Figure 6-24 The standard file dialog box for opening files 200

Figure 6-25 The save changes alert box 201

Chapter 7 Controls 203

Figure 7-1 Buttons in a dialog box 205

Figure 7-2 A highlighted button 205

Figure 7-3 A dialog box with OK and Cancel buttons 207

Figure 7-4 A dialog box with a Done button instead of an OK button 208

Figure 7-5 A progress indicator that uses a Stop button 209

Figure 7-6 A confirmation alert box with appropriately named button 209

Figure 7-7 Sets of radio buttons 210

Figure 7-8 Radio buttons for selecting the alignment of text 211

Figure 7-9 The General Controls panel 211

Figure 7-10 A set of checkboxes 212

Figure 7-11 A single checkbox in a dialog box 212

Figure 7-12 The Find dialog box 213

Figure 7-13 An example of a slider 214

Figure 7-14 A slider with direction information 215

Figure 7-15 Incorrect use of a scroll bar and correct use of a slider 215

Figure 7-16 Little arrows control 216

Figure 7-17 Content-dependent increment 217

Figure 7-18 Outline triangle control 218

Figure 7-19 A text entry field 219

Figure 7-20 A scrolling list 220

Chapter 8 Icons 223

Figure 8-1 Common icons 224

Figure 8-2 Examples of common traffic symbols 225

Figure 8-3 Examples of commonly-used international symbols 225

Figure 8-4 Symbols are easier to understand than keyboard commands 226

Figure 8-5 Grouping icons on the desktop 226

Figure 8-6 A confusing image 227

Figure 8-7 Context clarifies the image 227

Figure 8-8 Icons with label text 228

Figure 8-9 A logical and an illogical metaphor 229

Figure 8-10 Localized mailbox icons 230

Figure 8-11 Avoid text in icons 231

Figure 8-12 Certain shapes don't work well 231

Figure 8-13 A consistent light source 232

Figure 8-14 Inconsistent light sources 232

Figure 8-15 Design the large icon first and base the small icon design on it 233

Figure 8-16 Consistent use of icon elements 234

Figure 8-17 An icon family 234

Figure 8-18 Different sizes of icons 235

Table 8-1 Icon display on monitors of different bit depths 235

Figure 8-19 A well-designed icon and its selected version 238

Figure 8-20 A poorly designed icon and its selected version 238

Figure 8-21 Icons with a black outline 239

Figure 8-22 Icons without a black outline 239

Figure 8-23 Standard 256-color palette with icon colors marked 240

Figure 8-24 An example of dithered color in an icon 241

Figure 8-25 Color icons and their selected states 242

Figure 8-26 Color icons and their color-labeled states 243

Figure 8-27 Correct anti-aliasing 243

Figure 8-28 Consistently designed small icons 244

Figure 8-29 Inconsistently designed small icons 245

Figure 8-30 Default application icons 246

Figure 8-31 Custom application icons 246

Figure 8-32 Examples of bad application icons 247

Figure 8-33 Default document icons 247

Figure 8-34 Application icon and document icon with the same graphic element 247

Figure 8-35 Acceptable and unacceptable custom document icons 248

Figure 8-36 Document icons with standard symbols 248

Figure 8-37 Default stationery pad icons 249

Figure 8-38 Default query document icons 249

Figure 8-39 Default edition icons 250

Figure 8-40 Preferences file icons 250

Figure 8-41 Default extension icons 251

Figure 8-42 Examples of Chooser icons 251

Figure 8-43 Icons for the Color control panel 251

Figure 8-44 Font icons 252

Figure 8-45 A sound icon 252

Figure 8-46 The default keyboard layout and input method icons 253

Figure 8-47 Examples of keyboard icons 253

Figure 8-48 Examples of modification indicators on keyboard icons 254

Table 8-2 Pattern substitutions for colors in keyboard icons 254

Figure 8-49 Enlarged keyboard icons with correct color substitutions 255

Chapter 9 Color 257

Figure 9-1 A colorized window 259

Figure 9-2 A colorized movable modal dialog box 259

Figure 9-3 Color palette and custom color mixing tool 262

Figure 9-4 Design for black-and-white monitors first 263

Figure 9-5 Don't mimic color effects in black-and-white designs 263

Figure 9-6 A limited palette of colors 264

Chapter 10 Behaviors 267

Figure 10-1 Different pointing devices 268

Figure 10-2 The insertion point and the pointer 269

Table 10-1 Pointers 270

Figure 10-3 A status indicator 271

Figure 10-4 Clicking a button 272

Figure 10-5 Double-clicking to select a word 272

Figure 10-6 Pressing a scroll arrow 273

Figure 10-7 Dragging to move an object 274

Figure 10-8 Using the Tab key to cycle through fields 276

Figure 10-9 Using the Return key to move the insertion point 277

Figure 10-10 A sample confirmation dialog box for the Escape key 278

Figure 10-11 Using Option-drag to make a copy of an object 279

Figure 10-12 Arrow keys 281

Table 10-2 How modifier keys change the movement of the insertion point with the arrow keys 283

Figure 10-13 The function keys 284

Figure 10-14 Three ways of selecting information 287

Figure 10-15 Selection techniques 288

Figure 10-16 Expanding and shrinking a text selection 290

Figure 10-17 Extending text selections using the addition and fixed-point methods 290

Figure 10-18 Discontinuous selection within an array 292

Figure 10-19 Text selections 293

Figure 10-20 Selecting with Shift and arrow keys 296

Figure 10-21 Selecting with Option-Shift and arrow keys 296

Figure 10-22 Selection in an object-based graphics document 297

Figure 10-23 Selection in a bitmap-based graphics document 297

Figure 10-24 Field selection in an array 298

Figure 10-25 Column selection in an array 298

Figure 10-26 Range selection in an array 299

Figure 10-27 Discontinuous selection in an array 299

Figure 10-28 Intelligent cut and paste 302

Chapter 11 Language 305

Table 11-1 Translation chart for user documentation 307

Figure 11-1 Proper capitalization of screen elements 309

Figure 11-2 Clear button names 310

Figure 11-3 A poorly written alert box message 311

Figure 11-4 An improved alert box message 311

Figure 11-5 A well-written alert box message 311

Figure 11-6 Correct absence of a colon to introduce a list of options 312

Figure 11-7 Correct use of a colon 312

Table 11-2 Categories of questions for help systems 315

Figure 11-8 A help balloon 316

Figure 11-9 Help balloon for a button 319

Figure 11-10 Help balloon for a menu title 320

Figure 11-11 Help balloon for a menu item 320

Figure 11-12 Help balloon for a selected radio button 321

Figure 11-13 Help balloon for a checkbox 322

Figure 11-14 Help balloon for a group of radio buttons 323

Figure 11-15 Help balloon for a tool palette 323

Figure 11-16 Help balloons for an application icon and a document icon 324

Figure 11-17 Help balloon for a text entry box 325

Appendix A Resources 329

Appendix B Bibliography 335

Appendix C Checklist 351